<template>
	<div class="Book_Pay">
		<div class="Book_Nav">
			<div><button>返回</button></div>
			<div style="margin-left: 35%;">订单结算</div>
		</div>
		<hr style="width: 100%;" />
		<div class="usr_addr">
			<p>请确认收货人信息</p>
			<div>姓名 <input v-model="user.ship2name" /></div>
			<div>电话<input v-model="user.ship2phone" /></div>
			<div>地址<input v-model="user.ship2addr" /></div>
		</div>
		<hr style="width: 100%;" />
		<div class="usr_order">

			<div v-for=" item in list">
				<div style="display: flex; background-color: white;width: 90%;border-radius: 10px;">
					<img style="width: 30%;" :src="`http://127.0.0.1/api/public/showimg/${item.book.pic}`" />
					<div>
						<div>{{item.book.name}}</div>
						<div>x{{item.num}}</div>
						<div>共支付￥{{item.price}}</div>
					</div>
					<div>

					</div>
				</div>
				<div style="height: 10%;">l</div>
			</div>
		</div>
		<div><button @click="addpay">支付</button> </div>
	</div>
</template>

<script>
	export default {
		name: '',
		data() {
			return {
				list: [],
				order: {
					days: '120',
					payStaus: '0',
					shipStatus: '',
					phone: '',
					account: '',
					nickname: ''
				},
				user: {
					ship2addr: '',
					ship2name: '',
					ship2phone: ''
				},
			}
		},
		methods: {
			findone() {
				this.$get("/api/user/shipInfo").then((resp) => {
					console.log(resp.data.data)
					this.user.ship2name = resp.data.data.name
					this.user.ship2phone = resp.data.data.phone
					this.user.ship2addr = resp.data.data.addr
				})
			},
			addpay() {
				let ordid = this.$route.query.ordid
					this.$postKv("/api/fore/ord/addPay/" + ordid)
						.then((resp) => {
							console.log(resp.data.data)
							alert(resp.data.code)
						})
			},
			getnopayorder() {
				let ordid = this.$route.query.ordid
				this.$get("/api/fore/ord/findByOrdid/" + ordid).then((resp) => {
					console.log(resp.data.data)
							resp.data.data.items.forEach((u) => {
								console.log(u)
								this.list.push(u)
							})
					console.log(this.list)
				})
			}
		},
		mounted() {
			this.getnopayorder()
			this.findone()
		}
	}
</script>

<style>
	.usr_order {

		margin: 10px auto;
		margin-left: 10%;

	}

	.usr_addr {
		background-color: #DCDCDC;
	}

	* {
		margin: 0;
		padding: 0;
	}

	.Book_Pay {
		width: 100%;
	}

	.Book_Nav button {
		background-color: none;
		border: none;
	}

	.Book_Nav {
		display: flex;
		width: 100%;
	}
</style>